<template>
    <div class="runDetailLine" ref="detailLine"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { onMounted, defineProps, watch, ref, nextTick, reactive } from 'vue';
const props = defineProps({
    data: {
        type: Array,
        default: [0]
    },

    switch: {
        type: Number,
        default: 1
    }

})
let detailLine = ref(null)
const dl = ref(null)
const switchr = ref(props.switch)
onMounted(() => {
    dl.value = echarts.init(detailLine.value);
    dl.value.setOption(lineOption.value);
})
watch(() => props.switch, (newVal) => {
    switchr.value = newVal
    dl.value.clear()
    dl.value = null

    lineOption.value.series[0].data = dataMore[switchr.value].dataA
    lineOption.value.series[1].data = dataMore[switchr.value].dataB
    setTimeout(() => {
        dl.value = echarts.init(detailLine.value);
        dl.value.setOption(lineOption.value);
    }, 0);
})
const dataMore = reactive(
    [{ dataA: [210, 310], dataB: [-200, -250] },
    { dataA: [301, 410], dataB: [-400, -250] },
    { dataA: [333, 310], dataB: [-200, -342] },
    { dataA: [301, 222], dataB: [-555, -250] }]
);
const dataMoreItem = ref({ dataA: [210, 310], dataB: [-200, -250] })
const lineOption = ref({
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    legend: {
        data: ["出水温度", "进水温度"],
        //字体颜色
        textStyle: {
            color: '#fff'
        }
    },
    grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "value",
        },
    ],
    yAxis: [
        {
            type: "category",
            axisTick: { show: false },
            data: [
                "蒸发器",
                "冷凝器",
            ],
        },
    ],
    series: [
        {
            name: "出水温度",
            type: "bar",
            stack: "总量",
            color: '#0ca9d9',
            label: {
                normal: {
                    show: true,
                },
            },
            data: dataMoreItem.value.dataA,
        },
        {
            name: "进水温度",
            type: "bar",
            stack: "总量",
            color: '#a207d4',
            label: {
                normal: {
                    show: true,
                },
            },
            data: dataMoreItem.value.dataB,
        },
    ],

})
</script>

<style scoped lang="scss">
.runDetailLine {
    /* position: absolute; */
    width: 100%;
    height: 100%;
}
</style>